<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0 auto;
			}
			
			body {
				background: black;
			}
			
			div {
				background: black;
				line-height: 40px;
			}
			
			a {
				color: white;
				text-decoration: none;
				position: relative;
				font-size: 13px;
				opacity: 0.5;
				left: 150px;
				padding: 6px;
			}
			
			a:nth-child(1) {}
			
			a:hover {
				opacity: 1;
			}
			
			.dengLu {
				position: relative;
				left: 600px;
			}
			
			.zhuche {
				position: relative;
				left: 600px;
			}
			
			.xiaoxi {
				position: relative;
				left: 600px;
			}
			
			h1 {
				color: lightgoldenrodyellow;
				text-align: center;
			}
			
			h2 {
				color: lightgoldenrodyellow;
				text-align: center;
			}
			
			#s2 {
				width: 100%;
				height: 1000px;
				background: linear-gradient(to left, #091A14, #23755b);
			}
			
			#s3 {
				width: 100%;
				height: 1000px;
				border: solid black 1px;
			}
			
			.r {
				background: white;
				line-height: 60px;
				}
							
			h3:nth-of-type(1) {
				left: 150px;
				text-decoration: none;
				position: relative;
				font-family: 20px "宋体";
			}
			
			h3:nth-of-type(2) {
				left: 800px;
				text-decoration: none;
				position: relative;
				font-family: 20px "宋体";
			}
			h3 {
				display: inline-block;
			}
			
			.a1 {
				color: black;
				font-size: 15px;
			}
			
			.a1:hover {
				color: chocolate;
			}
			
			.a2 {
				color: black;
				font-size: 15px;
				left: 950px;
			}
			
			.a2:hover {
				color: chocolate;
			}
			
			.a3 {
				color: black;
				font-size: 15px;
				left: 954px;
			}
			
			.a3:hover {
				color: chocolate;
			}
			
			.a4 {
				color: black;
				font-size: 15px;
				left: 955px;
			}
			
			.a4:hover {
				color: chocolate;
			}
			
			.a5 {
				color: black;
				font-size: 15px;
				left: 956px;
			}
			
			.a5:hover {
				color: chocolate;
			}
				#s3 {
				color: white;
				font-size: 20px;
			}
			
			.GM {
				width: 80px;
				height: 30px;
				position: relative;
				left: 959px;
				background-color: orange;
				border: none;
			}
			#s1{	
				width: 1519px;
				height: 837px;
				background: url(img/banner_bg1.jpg);
				background-position: 10px 5px;	
				background-size: 1519px 837px;
				background-repeat: no-repeat;		
				text-align: center;
				font-size:30px ;
			}
			#s1 p:nth-of-type(1){
				color: blue;
				 position: relative;
				 bottom:-70px;
				 left:10px;
				 font-size:50px ;
			}
			#s1 p:nth-of-type(2){
				color: white;
				 position: relative;
				 bottom:-90px;
				 left:10px;
				 font-size:25px ;
			}
			#s1 p:nth-of-type(3){
				color: white;
				 position: relative;
				 bottom:-105px;
				 left:10px;
				 font-size:23px ;
				 }
		    #s2{
				 	background: #000000;
				 }
		     #s2 h1:nth-of-type(1){
				 	color: white;
				 	font-size:20px;
				 	position: absolute;
			        top:1000px;
			        font-size: 20px;
			        left: 400px;
			        font-weight: initial;				 	
				 }
		     #s2{
		     	color: gainsboro;
		     	width: 1519px;
		     	height: 258px;
		     }
		     #s2 p:nth-of-type(1){
		     	   position: absolute;
			        top:1030px;
			        font-size: 15px;
			        left: 400px;
		     }
		     #s2 p:nth-of-type(2){
		     	  position: absolute;
			      top:1030px;
			      font-size: 15px;
			      left:700px;
		     }
		     #s2 h1:nth-of-type(2){
		     		color: white;
				 	font-size:20px;
				 	position: absolute;
			        top:1000px;
			        font-size: 20px;
			        left: 700px;
			        font-weight: initial;	
		     }
		     #s2 p:nth-of-type(3){
		     	  position: absolute;
			      top:1030px;
			      font-size: 15px;
			      left:1000px;
		     }
		     #s2 h1:nth-of-type(3){
		     	color: white;
				 	font-size:20px;
				 	position: absolute;
			        top:1000px;
			        font-size: 20px;
			        left: 1000px;
			        font-weight: initial;
		     }
		     #s2 h1:nth-of-type(4){
		     	color: white;
				 	font-size:20px;
				 	position: absolute;
			        top:1090px;
			        font-size: 20px;
			        left:400px;
			        font-weight: initial;
		     }
		     #s2 p:nth-of-type(4){
		     	  position: absolute;
			      top:1120px;
			      font-size: 15px;
			      left:400px;
		     }
		         #s2 h1:nth-of-type(5){
		     	color: white;
				 	font-size:20px;
				 	position: absolute;
			        top:1090px;
			        font-size: 20px;
			        left:700px;
			        font-weight: initial;
		     }
		      #s2 p:nth-of-type(5){
		     	  position: absolute;
			      top:1120px;
			      font-size: 15px;
			      left:700px;
		   }
		       #s2 h1:nth-of-type(6){
		     	color: white;
				 	font-size:20px;
				 	position: absolute;
			        top:1090px;
			        font-size: 20px;
			        left:1000px;
			        font-weight: initial;
		     }
		       #s2 p:nth-of-type(6){
		     	  position: absolute;
			      top:1120px;
			      font-size: 15px;
			      left:1000px;
		   }
		   #s3 h2:nth-of-type(1){
		   	color: white;
		   	position: absolute;
		    top:1880px;
			font-size: 35px;
			left:330px;
			font-weight: initial;
		   }
		   #s3 h2:nth-of-type(2){
		   	position: relative;
		   	color: white;
		   	top:90px;
			font-size: 35px;
			left:-270px;
			font-weight: initial;
		   }
		   #s3 p:nth-of-type(1){
		   	color: darkgray;
		   	position: relative;
		   	top:100px;
			font-size: 35px;
			left:330px;
		   }
		   #s3 p:nth-of-type(2){
		   	color: darkgray;
		   	position: relative;
		   	top:120px;
			font-size: 35px;
			left:330px;
		   }
		   #s3 p:nth-of-type(3){
		   	color: darkgrey;
		   	position: relative;
		   	top:130px;
			font-size: 35px;
			left:330px;
		   }
		   #s4{
		   	position: relative;
		   	top:-700px;
			left:-10px;
		   }
		   #s5 h2{
		   	color: white;
		   	position: relative;
		   	top:-680px;
			font-size: 35px;
			left:-120px;
		   }
		   #s5 p:nth-of-type(1){
		   	color: coral;
		   	position: relative;
		   	top:-665px;
			font-size: 35px;
			left:370px;
		   }
		   #s5 p:nth-of-type(2){
		   	color: coral;
		   	position: relative;
		   	top:-650px;
			font-size: 35px;
			left:370px;
		   }
		   #s6 {
		   	position: relative;
		   	top:-630px;
			left:-10px;
		   }
		   
		</style>
	</head>
	<body>
		   <div>
			<a href="index.html">小米商城</a>
			<a href="#">MlUl</a>
			<a href="#">loT</a>
			<a5 href="#">云服务</a>
			<a href="#">金融</a>
			<a href="#">有品</a>
			<a href="#">小爱开放平台</a>
			<a href="#">政企服务</a>
			<a href="#">下载APP</a>
			<a href="#">Select Region</a>
			<a href="login.html" class="dengLu">登陆</a>
			<a href="register.html" class="zhuche">注册</a>
			<a href="#" class="xiaoxi">销售通知</a>
		</div>

		<div class="r">
			<p>
				<h3>小米8 屏幕指纹版</h3>
				<h3><a href="#" class="a1">概述</a></h3>
				<h3><a href="#" class="a2">参数</a></h3>
				<h3><a href="#" class="a3">图集</a></h3>
				<h3><a href="#" class="a4">F码通道</a></h3>
				<h3><a href="#" class="a5">用户评价</a></h3>
				<a href="#" class="GM">立即购买</a>
			</p>
		</div>
		<div id="s1">
			<p>小米8  屏幕指纹版</p>
			<p>旗&nbsp;舰&nbsp;代&nbsp;表&nbsp;作&nbsp;全&nbsp;新&nbsp;升&nbsp;级</p>
			<p> ¥3199 起 </p>
		</div>
		
		<div id="s2">
			<h1>全球首款 压感屏幕指纹</h1>
			<p>轻压屏幕，瞬间解锁</p>
			<h1>全球首款 双频GPS</h1>
			<p>L1 + L5双频超精准定位</p>
			<h1>透明玻璃机身</h1>
			<p>另有暮光金、曜石黑</p>
			<h1>红外人脸识别</h1>
			<p>全黑环境疾速解锁</p>
			<h1>骁龙845 AIE 处理器</h1>
			<p>超旗舰性能</p>
			<h1>超轻四曲面</h1>
			<p>轻薄圆润，舒适手感</p>
		</div>
<img src="img/model_02.jpg" width="1519px" height="640px"/>
	<div id="s3">
		<h2>透明机身</h2>
		<h2>一部与众不同的手机</h2>
		<p>晶莹的四曲面玻璃机身下，</p>
		<p>饰以精密元器件点缀，</p>
		<p>科技与美学在此完美结合。</p>
	</div>
	<div id="s4">
		<img src="img/model_04.jpg" width="1519"height="639"/>
	</div>
	<div id="s5">
	<h2>全球首款双频GPS手机 超精准定位</h2>
	<p>L1+L5双频信号协同工作，在复杂城市环境中,</p>
	<p>有效提升导航精准度。</p>
	</div>
	<div id="s6">
		<img src="img/model_05.jpg"width="1519"height="838"/>
	</div>
	<style>
    #zui{
			width: 100%;
			height: 300px;
			display: block;
			color: white;
		}
		#zui img{
			width: 150px;
			height: 150px;
		}
		
		#zui div span a{
			text-decoration: none;
		}
		.jiange{
			position: relative;
			left: 170px;
			bottom: 150px;
		}
		#zui div a{
			text-decoration: none;
			color: white;
			position: relative;
			left: -1px;
		}
		#zui p a{
			line-height: 50px;
			text-decoration: none;
			color: white;
			opacity: 0.6;
			position: relative;
			left: -1px;
		}
		#zui p{
			position: relative;
			left: 170px;
			bottom: 150px;
			display: block;
		}
		#zui p a:hover{
			color: orange;
		}
		#zui div a:hover{
			color: orange;
		}
        #zui{
            position: relative;
            left: 350px;
            bottom: 300px;
        }
        .aaahome:hover{
         color: chocolate;
        }
</style>
<div id="zui" style="position: relative;top: -500px; left: 250px;">
        <img src="img/timg.jpg"/>
        <div class="jiange"><a href="">&nbsp;小米商城&nbsp;</a>|<a href="">&nbsp;MIUI&nbsp;</a>|<a href="">&nbsp;米家&nbsp;</a>|<a href="">&nbsp;米聊&nbsp;</a>|<a href="">&nbsp;多看&nbsp;</a>|<a href="">&nbsp;游戏&nbsp;</a>|<a href="">&nbsp;路由器&nbsp;</a>|<a href="">&nbsp;米粉卡&nbsp;</a>|<a href="">&nbsp;政企服务&nbsp;</a>|<a href="">&nbsp;小米天猫店&nbsp;</a>|<a href="">&nbsp;隐私政策&nbsp;</a>|<a href="">&nbsp;问题反馈&nbsp;</a>|<a href="">&nbsp;廉政举报&nbsp;</a>|<a href="">&nbsp;Select Region&nbsp;</a></div>
        <p>
            <a href="">&copy;<span>mi.com</span>京ICP证110507号</a>&nbsp;
            <a href="">京ICP备10046444号</a>&nbsp;<a href="">京公网安备11010802020134号</a>&nbsp;<a href="">京网文[2017]1530-131号</a>
        </p>
        <p>
            <a href="">(京)网械平台备字(2018)第00005号</a>&nbsp;
            <a href="">互联网药品信息服务资格证(京)-非经营性-204-0090</a>&nbsp;
            <a href="">营业执照</a>&nbsp;
            <a href="">医疗器械公告</a>
        </p>
    </div>
<a href="./index.html" style="position: relative;bottom: 2950px;left: 1400px;text-decoration: none;color:white"><p  class="aaahome">返回小米商城>>></p></a>
</html>
